<template>
  <div class="turnintoCurrency_wrap">
    <headTop :headClass="'white_header'">
      Turn into the coin
      <span slot="right" @click="$router.push({path: 'turnintoRecord', query: {type: type}})">Record</span>
    </headTop>
    <div class="scroll_wrap">
      <!-- mode -->
      <p class="way_txt">Selection method</p>
      <div class="way_box" @click="selectWay(-1)">
        <span class="way_title">current</span>
        <span class="iconfont" :class="{'icon-weixuanzhong' : select !== -1, 'icon-xuanzhong1' : select === -1}"></span>
      </div>
      <div class="way_box" @click="showList(1)">
        <div class="way_left">
          <span class="way_title">regular</span>
          <span class="notice" v-show="notice">You have a regular profit, and can not be transferred.</span>
        </div>
        <span class="iconfont icon-fanhui-copy" :class="{'active_style': show, 'active_style1': !show}"></span>
      </div>
      <ul class="way_list" v-if="show">
        <li class="way_item" v-for="(item, index) in typeList" :key="index" @click="selectWay(index)">
          <span class="way_title">{{item}}</span>
          <span class="iconfont" :class="{'icon-weixuanzhong' : select !== index, 'icon-xuanzhong1' : select === index}"></span>
        </li>
      </ul>
      <div class="out_wrap">
        <label for="out_num" class="out_txt">Change into the number of coins</label>
        <span class="line"></span>
        <input type="number" id="out_num" placeholder="Please input the number of transferred coins" v-model="num" @input="change">
        <p class="total">
          <span>MyYTCC:<span>{{total}}</span></span>
          <span class="predict" v-show="profitShow">Estimated revenue:{{doPredict}}</span>
        </p>
      </div>
      <div class="btn_wrap">
        <div class="public_btn" @click="sure">Confirm the transfer</div>
        <p>Earnings start from second days</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'turnintoCurrency',
  data () {
    return {
      type: Number(this.$route.query.type),
      num: '',
      total: '',
      basePredict: '',
      notice: false,
      state: false,
      profit: false,
      show: false,
      show1: true,
      activeNum: '',
      select: '',
      profitShow: false,
      typeList: ['cycle30day', 'cycle60day', 'cycle90day']
    };
  },
  computed: {
    doPredict () {
      if (this.num) {
        return (parseFloat(this.num) * this.basePredict).toFixed(2);
      } else {
        return '0.00';
      }
    },
    passWord () {
      return this.$store.state.modal.password;
    }
  },
  beforeMount () {
    this.getChange();
  },
  methods: {
    showList (num) {
      if (this.show1 && !this.show) {
        this.activeNum = null;
        this.show = true;
      } else if (this.show1 && this.show) {
        this.show = false;
      } else {
        if (this.activeNum === num) {
          this.activeNum = null;
          this.show = false;
        } else {
          this.activeNum = num;
          this.show1 = false;
          this.show = true;
        }
      }
    },
    selectWay (num) {
      this.select = num;
      if (this.select === -1) {
        this.profitShow = false;
      } else if (this.select !== -1) {
        this.getChange();
      }
    },
    //  Estimated revenue interface
    getChange () {
      if (this.select !== -1) {
        this.axios.get('index/transfer/estimate', {
          params: {
            type: this.select + 2
          }
        }).then(({data}) => {
          if (data.code === 200) {
            this.basePredict = data.data;
          } else {
            this.Toast(data.message);
          }
        });
      }
    },
    change () {
      if (this.select !== -1 && this.num !== '') {
        this.profitShow = true;
      };
    },
    sure () {
      if (!this.HasData(this.num)) {
        this.Toast('Please input the number of transferred coins');
      } else if (parseFloat(this.num) > parseFloat(this.total)) {
        this.Toast('Insufficient quantity');
      } else if (parseFloat(this.num) <= 0) {
        this.Toast('Illegal quantity transfer');
      } else if (!/^[1-9]\d*$/.test(this.num)) {
        this.Toast('please enter an integer');
      } else {
        this.isSetPwd();
      }
    },
    // Information interface
    reqinfo () {
      this.axios.get('index/transfer/currency_treasure').then(({data}) => {
        if (data.code === 200) {
          this.total = data.data;
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Switch to interface
    reqData () {
      this.ShowPassword(() => {
        this.axios.get('index/transfer/currency', {
          params: {
            type: this.select + 2,
            money: this.num,
            pay_password: this.passWord
          }
        }).then(({data}) => {
          if (data.code === 200) {
            this.Toast(data.message);
            this.num = '';
            if (this.select + 2 === 1) {
              setTimeout(() => {
                this.$router.replace({path: 'turnintoRecord?type=0'});
              }, 1000);
            } else {
              setTimeout(() => {
                this.$router.replace({path: 'turnintoRecord?type=1'});
              }, 1000);
            }
          } else {
            this.Toast(data.message);
          }
        });
      });
    },
    // Determining whether to set payment password
    isSetPwd () {
      this.axios.get('index/users/pay_pass').then(({data}) => {
        if (data.status === 200) {
          this.reqData();
        } else {
          this.Modal('Set transaction password', 'You need to set up the transaction password before purchasing operation. Please set up immediately.', ['cancel', 'To set up'], () => {
            this.$router.push('setPassword');
          });
        }
      });
    }
    // Order status interface (Say no to the back end.)
    // orderState () {
    //   this.axios.get('index/auto/current_treasure').then(({data}) => {
    //     if (data.code === 200) {
    //       this.state = true;
    //     } else {
    //       this.state = false;
    //     }
    //   });
    // },
  },
  mounted () {
    if (this.type === 0) {
      this.select = -1;
      this.profitShow = false;
    } else {
      this.show = true;
      this.select = 0;
    }
    this.reqinfo();
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .turnintoCurrency_wrap{
    padding-top: 90px;
    height: 100%;
    background: #f4f5f7;
    .header_wrap {
      span {
        color: #ff9e27;
      }
    }
    .scroll_wrap {
      height: 100%;
      overflow-y: scroll;
      // Selection method
      .way_txt {
        height: 90px;
        padding-left: 30px;
        font-size: 28px;
        color: #afafaf;
        line-height: 90px;
      }
      .way_box {
        height: 107px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28px;
        background: #fff;
        padding: 0 30px;
        color: #222222;
        border-bottom: 1Px solid #e6e6e6;
        .icon-weixuanzhong {
          color: #a5a5a5;
        }
        .icon-xuanzhong1 {
          color: #ffb117;
        }
        .icon-fanhui-copy {
          color: #afabbd;
          &.active_style {
            transform: rotate(180deg);
            color: #afabbd;
          }
        }
        .notice {
          font-size: 24px;
          color: #fe723e;
          padding-left: 10px;
        }
      }
      .way_list {
        padding: 0 30px;
        background: #fff;
        .way_item {
          height: 90px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 26px;
          color: #666666;
          border-bottom: 1Px solid #e6e6e6;
          .icon-weixuanzhong {
            color: #a5a5a5;
          }
          .icon-xuanzhong1 {
            color: #ffb117;
          }
        }
        .way_item:last-child {
          border-bottom: none;
        }
      }
      .out_wrap {
        background: #fff;
        padding: 0 26px 0 34px;
        margin-top: 20px;
        margin-bottom: 80px;
        position: relative;
        .out_txt {
          height: 86px;
          line-height: 86px;
          font-size: 28px;
          color: #999999;
          display: block;
        }
        .line {
          display: inline-block;
          width: 2Px;
          height: 50px;
          background: #afafaf;
          position: absolute;
          top: 37%;
          left: 6%;
        }
        input {
          width: 100%;
          height: 102px;
          line-height: 102px;
          font-size: 60px;
          color: #222222;
          border-bottom: 1Px solid #e6e6e6;
          text-indent: 35px;
          &::placeholder {
            font-size: 30px;
            color: #999;
            line-height: normal;
            line-height: 102px;
          }
        }
        .total {
          font-size: 107px;
          line-height: 107px;
          color: #666666;
          font-size: 28px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .predict {
            font-size: 24px;
            color: #fe723e;
          }
        }
      }
      .btn_wrap {
        text-align: center;
        margin-bottom: 30px;
        .public_btn {
          background: linear-gradient(180deg,#ffc507,#ff9f26);
          font-size: 30px;
          color: #222;
          box-shadow: 0px 0px 10px 10px #f6ebd2;
          margin-bottom: 40px;
        }
        p {
          font-size: 24px;
          color: #afafaf;
        }
      }
    }
  }
</style>
